<template>
  <div class="app">
    <div class="container" :style="{ transform: `scale(${scale})` }">
      <div class="header">
        <h1 class="title">数据大屏实时展示</h1>
        <span class="time">当前时间: {{ time }}</span>
      </div>
      <div class="main">
        <div class="left">
          <Left />
        </div>
        <div class="center">
          <Center />
        </div>
        <div class="right">
          <Right />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import dayjs from "dayjs";
import Left from "@/views/left/index.vue";
import Center from "@/views/center/index.vue";
import Right from "@/views/right/index.vue";
// import styles from "@/styles/variables.module.scss";
// console.log(styles);

const time = ref(dayjs().format("YYYY年MM月DD日 HH时mm分ss秒"));
let timeId: NodeJS.Timeout;
onMounted(() => {
  timeId = setInterval(() => {
    time.value = dayjs().format("YYYY年MM月DD日 HH时mm分ss秒");
  }, 1000);
});
onBeforeUnmount(() => {
  clearInterval(timeId);
});

const scale = ref(1);

const resize = () => {
  // 设计稿的宽度
  const draftWidth = 1366;
  const draftHeight = 611;
  // 当前屏幕的宽高
  const htmlEl = document.documentElement;
  const clientWidth = htmlEl.clientWidth;
  const clientHeight = htmlEl.clientHeight;

  if (draftWidth / draftHeight > clientWidth / clientHeight) {
    // 这是一个窄屏幕，需要用占满整个屏幕的宽度
    scale.value = clientWidth / draftWidth;
  } else {
    // 这是一个宽屏幕，需要用占满整个屏幕的高度
    scale.value = clientHeight / draftHeight;
  }
};

onMounted(() => {
  resize();
  window.addEventListener("resize", resize);
});
onBeforeUnmount(() => {
  window.removeEventListener("resize", resize);
});

defineOptions({
  name: "App",
});
</script>

<style scoped lang="scss">
.app {
  width: 100vw;
  height: 100vh;
  background-color: $bg-color;
  display: flex;
  justify-content: center;
  align-items: center;
}
.container {
  width: 1366px;
  height: 611px;
}

.header {
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
  background-image: url("./assets/head_bg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.title {
  margin: 0;
  font-size: 22px;
  color: #fff;
  margin-top: -10px;
}

.time {
  position: absolute;
  right: 10px;
  top: 15px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
}

.main {
  width: 100%;
  height: calc(100vh - 60px);
  padding: 0 10px 10px;
  box-sizing: border-box;
  display: flex;
}

.left,
.right {
  width: 340px;
  height: 541px;
}

.center {
  width: 666px;
  height: 541px;
}
</style>
